<template>
  <div class="points-earn-detail">
    <div class="header">
      <div class="nav-bar">
        <div class="nav-back" @click="goBack">
          <van-icon name="arrow-left" />
        </div>
        <div class="nav-title">积分详情</div>
        <div class="nav-action"></div>
      </div>
    </div>

    <div class="detail-content">
      <div class="detail-card">
        <div class="detail-header">
          <div class="detail-title">{{ record.changeTypeText }}</div>
          <div class="detail-points" :class="[record.type, { positive: record.points > 0, negative: record.points < 0 }]">
            {{ record.points > 0 ? '+' : '' }}{{ record.points }}
          </div>
        </div>

        <div class="detail-info">
          <div class="info-item">
            <div class="info-label">变动时间</div>
            <div class="info-value">{{ record.time }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">变动原因</div>
            <div class="info-value">{{ record.title }}</div>
          </div>
          <div class="info-item" v-if="record.studentName">
            <div class="info-label">学生姓名</div>
            <div class="info-value">{{ record.studentName }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">变动类型</div>
            <div class="info-value">{{ record.changeTypeText }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from 'vant'

export default {
  name: 'PointsEarnDetail',
  components: {
    [Icon.name]: Icon
  },
  data() {
    return {
      record: {}
    }
  },
  created() {
    // 从路由参数获取记录数据
    const recordData = this.$route.params.record
    if (recordData) {
      this.record = recordData
    } else {
      // 如果没有数据，返回上一页
      this.goBack()
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.points-earn-detail {
  width: 100%;
  height: 100%;
  background: #f6f8fc;

  .header {
    height: 60px;
    background: white;
    padding: 0 20px;
    border-bottom: 1px solid #eee;

    .nav-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;

      .nav-back {
        font-size: 24px;
        color: #333;
        cursor: pointer;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .nav-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }

      .nav-action {
        width: 30px;
      }
    }
  }

  .detail-content {
    padding: 15px;

    .detail-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .detail-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;

        .detail-title {
          font-size: 18px;
          color: #333;
          font-weight: 500;
        }

        .detail-points {
          font-size: 24px;
          font-weight: bold;

          &.course {
            color: #4ECDC4;
          }

          &.task {
            color: #45B7D1;
          }

          &.other {
            color: #96CEB4;
          }

          &.positive {
            color: #52c41a; // 正数颜色 - 绿色
          }

          &.negative {
            color: #ff4d4f; // 负数颜色 - 红色
          }
        }
      }

      .detail-info {
        .info-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          padding-bottom: 15px;
          border-bottom: 1px solid #f8f8f8;

          &:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
          }

          .info-label {
            font-size: 14px;
            color: #666;
            flex-shrink: 0;
          }

          .info-value {
            font-size: 14px;
            color: #333;
            text-align: right;
            flex: 1;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
